<template>
	<view class="content">
		<text class="title">春游记</text>
		<view style="{display: flex;flex-direction: column;}">
			<view class="input-group">
				<input v-model="phone" class="input" type="number" placeholder="请输入手机号" />
				<uni-icons class="icon left" type="phone-filled" size="30px" color="#fff"></uni-icons>
				<uni-icons class="icon right" type="clear" size="30px" color="#1296DB"></uni-icons>
			</view>
			<!--f4: 密码输入框 -->
			<view class="input-group pwd-group">
				<input v-model="pwd" :password="hidePwd" type="safe-password" placeholder="请输入密码" class="input">
				<uni-icons class="icon left" type="locked-filled" size="30px" color="#fff"></uni-icons>
				<uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" size="30px"
					@click="hidePwd = !hidePwd" color="#8a8a8a"></uni-icons>
			</view>
			<!-- f5 : 登录 -->
			<button class="btn" @click="doLogin">登 录</button>
			<!-- f6 :忘记密码 -->
			<view class="wj">
				<!-- <view></view> -->
				<navigator style="margin-left:35% ;" open-type="switchTab" class="find" url="../index/index">免密登录
				</navigator>
				<!-- f7 :免密登录 -->
				<navigator style="margin-left:15% ;" class="find" open-type="navigate" url="forgetpwd/forgetpwd">忘记密码
				</navigator>
			</view>
			<!-- f7 : 用户服务协议 -->
			<navigator class="agreement" open-type="navigate" url="agreement/agreement">登录注册代表您同意<span>用户服务协议</span>
			</navigator>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				hidePwd: true,
				phone: '',
				pwd: ''
			}
		},
		methods: {
			async doLogin() {
				if (!/^1[3-9]\d{9}$/.test((this.phone))) {
					uni.showToast({
						title: '手机号非法',
						duration: 3000,
						icon: 'error',
						position: 'bottom'
					})
					return
				}

				if (this.pwd.length < 6) {

					uni.showToast({
						title: '密码长度不足',
						duration: 3000,
						icon: 'error',
						position: 'bottom'
					})
					return
				}
				let [err, res] = await uni.request({
					url: "https://www.codeboy.com/zhsqapi/user/login",
					method: 'POST',
					data: {
						phone: this.phone,
						pwd: this.pwd
					}
				})
				if (err) {
					console.log('Ajax响应失败', err)
				} else {
					console.log('Ajax响应成功', res)
					if (res.data.code == 2000) {

						uni.setStorageSync("userToken", res.data.token)
						uni.switchTab({
							url: "../index/index"
						})
					} else if (res.data.code == 4003) {
						uni.showToast({
							title: '手机号或密码错误',
							icon: 'none',
							duration: 3000
						})
					}
				}


			}
		},
		onLoad() {
			let {
				statusBarHeight
			} = uni.getSystemInfoSync();
			this.statusBarHeight = statusBarHeight;
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-image: url(../../static/img/bgc.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-attachment: fixed;
		background-size: cover;
		height: 100vh;
		width: 100vw;
	}

	.title {
		margin: 200rpx auto 0;
		text-align: center;
		font-size: 30px;
		color: #fff;
	}

	.input-group {
		position: relative;
		margin: $uni-spacing-col-lg * 3 $uni-spacing-col-lg*2 0;
		//弹性容器中子元素在交叉轴上居中对齐
		align-items: center;

		&.pwd-group {
			margin-top: $uni-spacing-col-lg;
		}

		.input {
			font-size: $uni-font-size-base;
			border: 1px solid $uni-border-color;
			border-radius: $uni-border-radius-base;
			width: 100%;
			height: $uni-font-size-lg * 3;
			padding: 0 $uni-spacing-col-base * 4.5;
			background-color: rgba(171, 171, 171, 0.4);
			color: #fff;
		}

		.icon {
			position: absolute;

			&.left {
				left: $uni-spacing-row-sm;
			}

			&.right {
				right: $uni-spacing-row-sm;
			}
		}
	}

	.btn {
		margin: $uni-spacing-col-lg*2.5 $uni-spacing-row-lg*1.5 0;
		background: blue;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-base;

		//SCSS函数：darken(颜色, 百分比)，返回一个更深的颜色值
		//SCSS函数：lighten(颜色, 百分比)，返回一个更浅的颜色值
		&:active {
			background-color: darken(blue, 5%);
		}
	}

	.wj {
		display: flex;
		justify-content: center;

		.find {
			text-align: center;
			color: #fff;
			margin-top: $uni-spacing-col-base*2;
		}
	}

	.agreement {
		text-align: center;
		color: #fff;
		margin-top: $uni-spacing-col-lg*19;
		color: #adadad;
		font-size: 0.8em;

		span {
			color: #fff;
		}
	}

	@media screen and(max-height:500px) {
		.logo {
			margin-top: $uni-spacing-col-lg * 2;
		}
	}

	@media screen and(min-height:700px) {
		.logo {
			margin-top: $uni-spacing-col-lg * 12;
			margin-bottom: $uni-spacing-col-lg * 4;
		}
	}
</style>
